<template>
  <div>
    <svg ref="barcode"></svg>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import JsBarcode from 'jsbarcode';
import { defineProps } from 'vue';

const props = defineProps({
  value: {
    type: String,
    required: true,
  },
  format: {
    type: String,
    default: 'CODE128',
    validator: (value) => [
      'CODE128',
      'EAN13',
      'EAN8',
      'UPC',
      'CODE39',
      'ITF14',
      'MSI',
      'Pharmacode'
    ].includes(value)
  },
});

const barcode = ref(null);

const generateBarcode = () => {
  if (barcode.value) {
    JsBarcode(barcode.value, props.value, {
      format: props.format,
      lineColor: '#000',
      width: 2,
      height: 100,
      displayValue: true,
    });
  }
};

onMounted(generateBarcode);

watch(() => props.value, generateBarcode);
watch(() => props.format, generateBarcode);
</script>
